<template>
  <div>
    <button @click="changeName">切换组件</button>
    <!-- <KeepAlive> -->
    <component :is="name"></component>
    <!-- </KeepAlive> -->
  </div>
</template>

<script>
import One from '@/components/One'
import Two from '@/components/Two'
export default {
  name: "App",
  data(){
    return{
      name:"One"
    }
  },
 components:{
  One,
  Two
 },
 methods: {
  changeName(){
    this.name = this.name === "One" ? "Two" : "One"
  }
 },
}
</script>

<style scoped>
</style>
